<template>
  <view class="container">
    <view class="title">登录</view> <!-- 加粗标题 -->
    <view class="input-group">
      <view class="input-box">
        <input type="text" placeholder="用户名" v-model="username" />
      </view>
    </view>
    <view class="input-group">
      <view class="input-box">
        <input type="password" placeholder="密码" v-model="password" />
      </view>
    </view>
    <view class="input-group half-width">
      <view class="input-box half-width-input">
        <input type="text" placeholder="验证码" v-model="inputCaptcha" />
      </view>
      <view class="captcha-box half-width-captcha" @click="generateCaptcha">
        {{ captcha }}
      </view>
    </view>
    <button class="login-button" type="primary" @click="login">登录</button>
    <view class="register-link" @click="register">
      没有账号？<text class="register-text">点击注册</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: "",
      captcha: "",
      inputCaptcha: ""
    };
  },
  methods: {
    generateCaptcha() {
      const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
      this.captcha = Array.from({ length: 4 }, () => chars[Math.floor(Math.random() * chars.length)]).join("");
    },
    async login() {
		//下面四行表示直接跳转，用于调试，之后可删除
	    uni.switchTab({
		  url: "/pages/mainPage/pinMain"
	    });
		return;
      if (!this.username || !this.password) {
        uni.showToast({ title: "请输入用户名和密码", icon: "none" });
        return;
      }
  
      if (this.inputCaptcha !== this.captcha) {
        uni.showToast({ title: "验证码错误", icon: "none" });
        this.generateCaptcha();
        return;
      }
  
      try {
        const res = await uniCloud.callFunction({
          name: "loginUser",
          data: { username: this.username, password: this.password }
        });
  
        if (res.result.code === 0) {
          uni.showToast({ title: "登录成功", icon: "success" });
          uni.redirectTo({
            url: "/pages/mainPage/pinMain"
          });
        } else {
          uni.showToast({ title: res.result.message, icon: "none" });
        }
      } catch (error) {
        uni.showToast({ title: "登录失败，请稍后重试", icon: "none" });
        console.error("登录错误:", error);
      }
    },
    register() {
      uni.redirectTo({
        url: "/pages/login/register"
      });
    }
  },
  mounted() {
    this.generateCaptcha();
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.title {
  font-size: 28px; /* 调整标题的字体大小 */
  font-weight: bold; /* 加粗标题 */
  color: #333;
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px;
  width: 100%;
}

.input-box {
  display: flex;
  align-items: center;
  border: 2px solid #000; /* 黑色边框 */
  border-radius: 10px; /* 圆滑的角 */
  padding: 10px;
}

input {
  flex: 1;
  border: none; /* 去掉默认边框 */
  outline: none; /* 去掉输入框的聚焦边框 */
}

.half-width {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.half-width-input {
  width: 48%; /* 占据一半宽度 */
}

.half-width-captcha {
  width: 48%; /* 占据一半宽度 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #000; /* 设置为黑色背景 */
  border: 2px solid #000;
  border-radius: 10px;
  font-size: 20px; /* 设置较大字体 */
  font-weight: bold;
  color: white; /* 字体颜色设置为白色 */
  cursor: pointer;
}

.login-button {
  width: 80%; /* 缩窄按钮 */
  background-color: #000; /* 设置为黑色背景 */
  color: #fff; /* 字体颜色设置为白色 */
  font-size: 18px; /* 增大字体 */
  font-weight: bold;
  padding: 8px;
  border: none;
  border-radius: 10px;
  margin-top: 15px;
  cursor: pointer;
}

.register-link {
  margin-top: 15px;
  text-align: center;
  color: #666;
  font-size: 14px;
}

.register-text {
  color: #333;
  font-weight: bold;
  text-decoration: underline;
}
</style>
